<template>
    <div class="edit-popup">
        <popup
            ref="popupRef"
            :title="popupTitle"
            :async="true"
            width="550px"
            :clickModalClose="true"
            @confirm="handleSubmit"
            @close="handleClose"
        >
            <el-form ref="formRef" :model="formData" label-width="84px" :rules="formRules">
                <el-form-item label="ID" prop="id">
                    <el-input v-model="formData.id" disabled />
                </el-form-item>
                <el-form-item label="申报类型" prop="typeId">
                    <el-select
                    v-model="formData.typeId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请选择申报类型"
                    style="width: 425px"
                    :remote-method="remoteLocationMethod"
                    :loading="loading"
                    @change="typeIdSelectChange">
                    <el-option
                        v-for="item in declarationTypeData"
                        :key="item.id"
                        :label="item.typeName"
                        :value="item.id">
                    </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="符号" prop="symbol">
                    <el-select
                    v-model="formData.symbol"
                    filterable
                    remote
                    reserve-keyword
                    style="width: 425px"
                    placeholder="请选择符号"
                    :loading="loading"
                     @change="symbolSelectChange">
                     <el-option
                        v-if="formData.typeId === 39|| formData.typeId === 17"
                        label="等于"
                        value="=">
                    </el-option>
                    <el-option
                        v-else
                        v-for="item in symbolList"
                        :key="item.id"
                        :label="item.symbolName"
                        :value="item.symbol">
                    </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申报条件" prop="acceptancerequirments">
                    <!-- <el-date-picker
                        v-if="formData.typeId === 1"
                        v-model="formData.acceptancerequirments"
                        type="date"
                        placeholder="请选择日期"
                        style="width: 425px !important;"
                    /> -->
                    <el-select
                    v-model="formData.acceptancerequirments"
                    v-if="formData.typeId === 19"
                    filterable
                    remote
                    reserve-keyword
                    style="width: 425px"
                    :loading="loading">
                    <el-option
                        v-for="item in researchOrganizationList"
                        :key="item.id"
                        :label="item.organizationName"
                        :value="item.organizationName">
                    </el-option>
                    </el-select>
                    <el-select
                    v-model="formData.acceptancerequirments"
                    v-else-if="formData.typeId === 33"
                    filterable
                    remote
                    reserve-keyword
                    style="width: 425px"
                    :loading="loading">
                    <el-option
                        v-for="item in systemInformation"
                        :key="item.id"
                        :label="item.informationName"
                        :value="item.informationName">
                    </el-option>
                    </el-select>
                     <el-select 
                     v-model="formData.acceptancerequirments"
                    v-else-if="formData.typeId === 39 || formData.typeId === 17"
                    filterable
                    remote
                    reserve-keyword
                    style="width: 425px"
                    :loading="loading">
                        <el-option label="有" value="有"></el-option>
                        <el-option label="无" value="无"></el-option>
                    </el-select>
                    
                    <el-input
                        v-else
                        v-model="formData.acceptancerequirments"
                        placeholder="请输入申报条件"
                    />
                    
                    <!-- typeId为1时显示日期选择框 -->
                    
                </el-form-item>
            </el-form>
        </popup>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { declarationEdit, declarationAdd, declarationDetail } from '@/api/declaration'
import { declarationTypeLists } from '@/api/declarationType'
import Popup from '@/components/popup/index.vue'
import feedback from '@/utils/feedback'
import type { PropType } from 'vue'
defineProps({
    dictData: {
        type: Object as PropType<Record<string, any[]>>,
        default: () => ({})
    }
})
const emit = defineEmits(['success', 'close'])
const formRef = shallowRef<FormInstance>()
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑申报条件' : '新增申报条件'
})
//被选中的类型对应字段
const field=ref({
    fields:'',
    fieldName:'',
});
const symbolName=ref()
//类型下拉框
const declarationTypeData = ref([]);
//条件运算符号
const symbolList=ref([
    {
    id:1,
    symbol: '>=',
    symbolName:'大于等于'
    },{
    id:2,
    symbol: '<=',
    symbolName:'小于等于'
    },{
    id:3,
    symbol: '=',
    symbolName:'等于'
    },{
    id:4,
    symbol: '!=',
    symbolName:'不等于'
    },{
    id:5,
    symbol: '>',
    symbolName:'大于'
    },{
    id:6,
    symbol: '<',
    symbolName:'小于'
    },
    {
    id:7,
    symbol: 'like',
    symbolName:'包含'
    },
]);
//研发机构下拉框
const researchOrganizationList=ref([
    {
    id:1,
    organizationName: '自建',
    },{
    id:2,
    organizationName: '市级',
    },{
    id:3,
    organizationName: '省级',
    },{
    id:4,
    organizationName: '国家级',
    }
])
//信息系统下拉框
const systemInformation=ref([
    {
    id:1,
    informationName: 'CAX',
    },{
    id:2,
    informationName: 'CAM',
    },{
    id:3,
    informationName: 'ERP/OA',
    },{
    id:4,
    informationName: 'CRM',
    },{
    id:5,
    informationName: 'SRM',
    }
])
const formData = reactive({
    id: '',
    modifier: '',
    creator: '',
    code: '',
    acceptancerequirments: '',
    typeId:'',
    symbol:'',
    andsql:'',
    andsqlName:'',
    // symbolList:''
})

const formRules = {
    typeId: [
        {
            required: true,
            message: '请输入申报类型',
            trigger: ['blur']
        }
    ],
    acceptancerequirments: [
        {
            required: true,
            message: '请输入申报条件',
            trigger: ['blur']
        }
    ],
    symbol:[
        {
            required: true,
            message: '请输入符号',
            trigger: ['blur']
        }
    ]
}


//获取申报类型
const paramsType = reactive({
        pageNo: 1,
        pageSize: 60,
        typeName:null
        })
const getDeclarationType = async () =>{
    
    try {
        await declarationTypeLists(paramsType).then((res)=>{
            declarationTypeData.value=res.lists
            return  declarationTypeData.value
        })
      } catch (error) {
        console.error('获取数据失败:', error);
      }
}
//搜索申报类型
const remoteLocationMethod=async (query)=>{
      paramsType.typeName=query
      declarationTypeLists(paramsType).then((res)=>{
        declarationTypeData.value=res.lists
        return  declarationTypeData.value
      })
}

const typeIdSelectChange=async(value)=>{
    // 根据选中的值获取完整的 item
    const selectedItem = declarationTypeData.value.find(item => item.id === value);
    if (selectedItem) {
      // 获取 typefield
      field.value.fields=selectedItem.typeField;
      field.value.fieldName = selectedItem.typeName;
      console.log("field",field.value); // 这里可以处理 selectedItem.typefield
    }
}
const symbolSelectChange=async(value)=>{
    const selectedSymbolName = symbolList.value.find(item => item.symbol === formData.symbol)?.symbolName;
    if (selectedSymbolName) {
      symbolName.value = selectedSymbolName;
      console.log("symbolName",selectedSymbolName); // 这里可以处理 selectedItem.typefield
    }
}
const open = (type = 'add') => {
    mode.value = type
    popupRef.value?.open()
}


const handleSubmit = async () => {
    await formRef.value?.validate()
    // formData.andsql=field+formData.modifier+formData.acceptancerequirments
    if(formData.symbol=='like'&&formData.symbol!=null){//若是like
        formData.andsql=field.value.fields+"%"+formData.symbol+"%"+formData.acceptancerequirments
    }else{
        formData.andsql=field.value.fields+formData.symbol+formData.acceptancerequirments
    }
    formData.andsqlName=field.value.fieldName+symbolName.value+formData.acceptancerequirments
    const data: any = { ...formData }
    mode.value == 'edit' ? await declarationEdit(data) : await declarationAdd(data)
    popupRef.value?.close()
    feedback.msgSuccess('操作成功')
    emit('success')
}

const setFormData = async (data: Record<string, any>) => {
    for (const key in formData) {
        if (data[key] != null && data[key] != undefined) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

const getDetail = async (row: Record<string, any>) => {
    formData.typeId=row.id//下拉框展示对应的typename
    formData.symbol=row.symbol
    field.value.fields=row.typeField
    field.value.fieldName=row.typeName
    symbolName.value=symbolList.value.find(item => item.symbol === row.symbol)?.symbolName;
    console.log("row传值",symbolList.value.find(item => item.symbol === row.symbol)?.symbolName)
    const data = await declarationDetail({
        id: row.id
    })
    setFormData(data)
}

const handleClose = () => {
    emit('close')
}

defineExpose({
    open,
    setFormData,
    getDetail,
})
    getDeclarationType()
</script>
